<template>
  <a-modal v-model:open="open2" :title="node.string" width="600px">
    <a-table
      row-key="id"
      :data-source="records"
      :columns="columns"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
    >
    </a-table>

    <template #footer>
      <a-space>
        <a-button size="small" key="commit" @click="onSelect"> 选择 </a-button>

        <a-button size="small" key="back" @click="open2 = false">
          取消
        </a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
import api from '@/odoojs/index.js'

import { computed, ref, toRaw } from 'vue'

import { useSubTree } from './subTreeApi.js'

const props = defineProps(['open', 'records', 'node', 'parentInfo'])
const emit = defineEmits(['update:open', 'row-select'])

const { columns } = useSubTree(props)

const open2 = computed({
  get() {
    return props.open
  },
  set(val) {
    emit('update:open', val)
  }
})

const selectedRowKeys = ref([])

const onSelectChange = keys => {
  // console.log('selectedRowKeys changed: ', keys)
  selectedRowKeys.value = keys
}

function onSelect() {
  const ids = selectedRowKeys.value

  const vals = ids.map(item => {
    return toRaw(props.records.find(one => one.id === item))
  })

  // console.log('onSelect', vals)
  emit('row-select', vals)
  open2.value = false
}
</script>

<style scoped></style>
